import React,{
  memo
} from 'react';
import { Button, Tag, Input, Avatar } from 'antd'
import { CloseOutlined ,SearchOutlined} from '@ant-design/icons';

function UserListBox (props, ref){
  let url = 'https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2';
 const onCickFun = () =>{
   props.onUserObj({t:false});
 }

  return <>
    <div className="user-list-box">
      <div className="ulb-top">
        <div className="ulb-box">
          <Tag color="blue" className="ulb-tag" closeIcon={<CloseOutlined />}>blueblueblue</Tag>
          <Tag color="blue" className="ulb-tag" closeIcon={<CloseOutlined />}>blue</Tag>
          <Tag color="blue" className="ulb-tag" closeIcon={<CloseOutlined />}>blue</Tag>
          <Tag color="blue" className="ulb-tag" closeIcon={<CloseOutlined />}>blue</Tag>
          <Tag color="blue" className="ulb-tag" closeIcon={<CloseOutlined />}>blue</Tag>
          <Tag color="blue" className="ulb-tag" closeIcon={<CloseOutlined />}>blueblueblue</Tag>
          <Tag color="blue" className="ulb-tag" closeIcon={<CloseOutlined />}>blue</Tag>
          <Tag color="blue" className="ulb-tag" closeIcon={<CloseOutlined />}>blue</Tag>
          <Tag color="blue" className="ulb-tag" closeIcon={<CloseOutlined />}>blue</Tag>
          <Tag color="blue" className="ulb-tag" closeIcon={<CloseOutlined />}>blue</Tag>
          <Tag color="blue" className="ulb-tag" closeIcon={<CloseOutlined />}>blue</Tag>
          <Tag color="blue" className="ulb-tag" closeIcon={<CloseOutlined />}>blue</Tag>
        </div>
      </div>
      <div className="ulb-toole">
         <div className="ulb-toole-l">
           <p>您可以在下面添加最多10位好友</p>
         </div>
         <div className="ulb-toole-r">
           <Button type="primary" onClick={()=>onCickFun()} className="ulb-button">确定</Button>
         </div>
      </div>
     <div className="ulb-mian">
       <div className="ulb-l">
         <Input
           placeholder="搜索好友"
           className="ulb-search"
           suffix={
             <SearchOutlined className="ulb-icon"/>
           }
         />
         <div className="ulb-user-list">
             <div className="ulb-u-item ulb-u-item1">全部</div>
           <div className="ulb-u-item">我的好友</div>
         </div>
       </div>
       <div className="ulb-r">
         <div className="ulb-r-mian">
           <div className="ulb-r-item">
             <Avatar shape="square" size={40} src={url} />
             <div className="yh-name">大撒村大撒村大撒村</div>
              <i className="iconfont mt-square "></i>
           </div>
           <div className="ulb-r-item url-xz">
             <Avatar shape="square" size={40} src={url} />
             <div className="yh-name">大撒村大撒村大撒村</div>
             <i className="iconfont mt-squarecheckfill "></i>
           </div>
           <div className="ulb-r-item ">
             <Avatar shape="square" size={40} src={url} />
             <div className="yh-name">大撒村大撒村大撒村</div>
             <i className="iconfont mt-square "></i>
           </div>


         </div>
       </div>
     </div>

    </div>

  </>
}

export default memo(UserListBox);
